<template>
    <div>
         <div class="sn-tofixed">
                <div class="sn-pro-scroll" id="sn-scroll" style="touch-action: none;" :class="{'showout': top > 60}">
                    <!-- <search :num='2'></search> -->
                    <a href="#/needshop/2">
                      <div class="sn-search">
                          <div class="sn-se-inp">
                            <i class="search-icon"></i>
                            <input id="searchIup" v-model="getshoplistNow"  type="text" class="searchInp" placeholder="搜索你想要的商品" value="">
                          </div>
                      </div>
                    </a>
                    
                </div>
             
                <div class="sn-ops" style="transform: translate(0px, 0px);" >
                    <ul class="sn-sort">
                        <li class="complex-sort" :class="{'curr': curr == 'comprehensive' || curr == ''}" @click="order({orderBy:0, name: 'comprehensive'})">综合</li>
                        <li class="sales-sort" :class="{'curr': curr == 'sale'}" data-sort="1" @click="order({orderBy:1, name: 'sale'})">销量</li>
                        <li class="price-sort"  data-sort="2" :class="{'curr': curr == 'price', 'priceAsc': this.orderAsc=='asc', 'priceDesc': this.orderAsc=='desc'}"  @click="order({orderBy: 2,orderAsc: 'asc', name: 'price'})">
                            价格
                            <span class="top" ></span>
                            <span class="bottom"></span>
                        </li>
                    </ul>
                </div>
                <div class="nav-more-cont-bg"></div>
        </div>
        <div class="searchList-wrap" style="transform: translate(0px, 0px);" ref="searchListWrap">
            <list :listshopdata="listshopdata"></list>
            <div v-if="noshop" class="shoplist-nosale">
                <img src="/static/images/nosale.png" alt="">
                <p>没有找到你要的商品哦~</p>
                <a class="noshop-button" href="#/needshop">换个词看看呢</a>

            </div>
        </div>
    </div>
</template>

<script>
    import {  levelCatalog, listshop, getprice, catalog, getpcss } from '@/service/getData'
    import { mapGetters } from 'vuex'
    import { img } from '../../../../config/env.js'
    import list from './list'
    export default {
        data(){
            return {
                catalogCode:'',
                routeid: 0,
                listshopdata: [],
                top: 0,
                totalPageCount: 0,
                on: true,
                jsonnum: 1,//商品列表接口callback = json+jsonnum
                orderAsc: '',
                curr: '',
                noshop: false,
                showall: false,
                orderBy:0,
                toptext:'',
                tabnum:1,
                time:'',
                 
            }
        },
        computed:{
            ...mapGetters({
                getshoplistNow: 'getshoplistNow',
                position: 'position',
            })
        },
        mounted() {
            this.fetchDate(1);
        },

        methods:{
            order(val){

                if(val.name != "price") {
                    this.orderAsc = '';
                    if(val.name == "comprehensive" && this.curr == '')return ;
                    if(val.name == this.curr)return ;
                }
                if(val && val.name == "price") {
                    if( this.orderAsc == "asc"  ) {
                        this.orderAsc = "desc"
                        val.orderAsc = "desc"
                    }else if(this.orderAsc == "desc" || this.orderAsc=='') {
                        this.orderAsc = "asc"
                        val.orderAsc = "asc"
                    }
                }
                this.curr = val.name;
                this.fetchDate(val)
            },
            fetchDate(val, old){
                //全部    
                let catalogCode = this.$route.params.catalogCode

                var numdata;
                var boole = (toString.call(val) == "[object Object]") && (arguments.length == 1)//针对综合，销量，价格来的
                if(arguments.length == 2){//除了点击综合，销量，价格之外
                    this.curr = "comprehensive"
                    this.orderAsc=''
                }
                if( arguments.length == 2 || boole || val == 'all'){
                    this.listshopdata = [];
                    this.top = 0;
                    numdata = 1 //切换tab，现默认1 //只针对滚动的时候增加
                }else if(typeof val == "number"){
                    numdata = val //当页面滚动,和进来的时候
                } 

                if(toString.call(numdata) == "[object Undefined]") return;

                var data1 = {
                    data:{
                        cityCode: this.position.cityCode,
                        storeCode: this.position.storeLocation,
                        retailFormatTypes: -1,
                        orderBy: 0,
                        pageSize: 10,
                        pageNumber: numdata,
                        source: 'wap',
                        version: '3.2.2',
                        _: Math.random()+10000000,
                        catalogSearch: 0,
                        keyword:this.getshoplistNow
                    },
                    jsonnum: this.jsonnum,
                 }
                

                 if(boole && val.name){
                    data1.data.orderBy = val.orderBy
                    this.orderBy = val.orderBy
                 }

                 if(typeof val == "number" &&　this.orderBy != 0 ){　//滚动的时候
                    data1.data.orderBy = this.orderBy
                 }
                 if(typeof val == "number" && this.orderAsc){  //滚动的时候
                    data1.data.orderAsc = this.orderAsc
                 }

                 if(boole && val.name == "price"){
                    data1.data.orderAsc = val.orderAsc
                 }   
                 listshop(data1)
                 .then((json) => {
                    if(!json.resultData || !json.resultData.oneHourUp)return;
     
                    var listshopdata = json.resultData.oneHourUp.resultObject
                
                    var _that = this;
                    var shopcmmdtyCode= [];//商品编码集合，便于获取价格
                    
                   
                    if(!listshopdata){
                        this.noshop = true 
                        return
                    }else{
                        this.noshop = false
                    }
                    var paccAarr = [];
                    for(let i=0; i < listshopdata.length; i++) {
                        if(listshopdata[i].cmmdtyImageSrc == '0') {
                            listshopdata[i].src1 = img()+'/uimg/cmws/catentries/uimg/b2c/newcatentries/0000000000-' + listshopdata[i].cmmdtyCode +'_1_400x400.jpg'
                        }
                        else{
                            listshopdata[i].src1 = img()+'/uimg/cmws/catentries/'+listshopdata[i].cmmdtyCode+'_1_400x400.jpg'
                        }
                        let img1 = new Image();
                        img1.src = listshopdata[i].src1;
                        img1.onerror = function(){
                            _that.$set(listshopdata[i], 'src1', '/static/images/pro-default.png');
                        }
                        var cmmdtyCode = listshopdata[i].cmmdtyCode+'-'+listshopdata[i].supplierCode
                        shopcmmdtyCode.push(cmmdtyCode );

                        //爆炸贴
                        //爆炸贴,731不做，先注释，开始
                        // paccAarr.push({cmmdtyCode:listshopdata[i].cmmdtyCode,supplierCode:listshopdata[i].supplierCode,channel:'WAP',labelScene:'07'})
                        //爆炸贴,731不做，先注释，结束
                    }

                     //爆炸贴
                     //爆炸贴,731不做，先注释，开始
                     // var paccClass = 'righttop';//默认位置
                     //    getpcss({
                     //        params: JSON.stringify(paccAarr)
                     //    }).
                     //    then((rep) => {
                     //        if(rep[0]) {
                     //            for(var i = 0; i < rep.length; i++) {
                     //                if(rep[i].labelList &&　rep[i].labelList.length == 1 && rep[i].labelPath) {
                     //                    if(rep[i].labelPlace == '1'){
                     //                        paccClass = 'lefttop'
                     //                    }
                     //                    if(rep[i].labelPlace == '2'){
                     //                        paccClass = 'righttop'
                     //                    }
                     //                    if(rep[i].labelPlace == '3'){
                     //                        paccClass = 'leftbottom'
                     //                    }
                     //                    if(rep[i].labelPlace == '1'){
                     //                        paccClass = 'rightbottom'
                     //                    } 
                     //                    this.$set(listshopdata[i], 'labelPath', rep[i].labelPath)
                     //                    this.$set(listshopdata[i], 'paccClass', paccClass)
                     //                }
                     //            }
                     //        }
                     //    })
                    //爆炸贴,731不做，先注释，结束

                    var totalPageCount = json.resultData.oneHourUp.totalPageCount;
                    if((val == 1 || arguments.length == 2) && (totalPageCount > 0)) {//只有刚进去和切换tab
                        this.totalPageCount =  totalPageCount//总页数
                    }


                   this.getPro(shopcmmdtyCode, listshopdata);//获取对应编码的价格数组
 
                   
                 });

               

                this.jsonnum++;
            },

            getPro(shopcmmdtyCode, listshopdata){
                var num1 = parseInt(Math.random()*1000000);
               
                getprice({
                    cityCode: this.position.cityCode,
                    storeCode: this.position.storeLocation,
                    shopcmmdtyCode: shopcmmdtyCode,
                    num: num1,
                    app :'wap',
                    appVersion: '3.2.2'
                })
                .then((rep) => {

                      var pricedata;

                      if(pricedata = rep.resultData){

                            for(let i = 0; i < pricedata.length; i++){
                                if (parseFloat(pricedata[i].price) >0) {

                                    this.$set(listshopdata[i], 'price', pricedata[i].price);
                                 

                                    // 老价格大于新价格 展示老价格
                                    (pricedata[i].priceType==11 || pricedata[i].priceType==20 || pricedata[i].priceType==21||pricedata[i].priceType==22)&&parseFloat(pricedata[i].price) <= parseFloat(pricedata[i].basePrice) && this.$set(listshopdata[i], 'basePrice', pricedata[i].basePrice);
                                   
                                }else{

                                    this.$set(listshopdata[i], 'className1', 'item-noinv');
                                }
                                // if(pricedata[i].saleType !=0 || !pricedata[i].price || !pricedata[i]){
                                if(  !pricedata[i].price || !pricedata[i]){
                                    this.$set(listshopdata[i], 'className1', 'item-noinv');
                                }
                                 

                                parseFloat(pricedata[i].availableQty)<=0 && this.$set(listshopdata[i], 'className1', 'item-noinv');

                                switch (pricedata[i].priceType) {
                                    case "0":
                                        //小店普通商品
                                        this.$set(listshopdata[i], 'className', 'item-noinv');
                                        break;
                                    case "20":
                                        //中心仓普通商品
                                        this.$set(listshopdata[i], 'className', 'item-center');
                                        break;
                                    case "21":
                                        //大聚会
                                        this.$set(listshopdata[i], 'className', 'djh');
                                        break;
                                    case "22":

                                        //抢购
                                        this.$set(listshopdata[i], 'className', 'icon-qg');
                                        break;
                                }
                                if(pricedata[i].priceType == '22' || pricedata[i].priceType == '21') {
                                    //预热不可买
                                    if(pricedata[i].activityInfo && pricedata[i].activityInfo.actState == '1'){
                                            this.$set(listshopdata[i], 'className1', '');
                                    }
                                    //静默期
                                    if(pricedata[i].activityInfo && pricedata[i].activityInfo.actState == '5'){
                                        this.$set(listshopdata[i], 'className1', 'item-noinv');
                                    }
                                }
                                 
                                this.$set(listshopdata[i], 'priceType', pricedata[i].priceType);
                                this.$set(listshopdata[i], 'availableQty', pricedata[i].availableQty);

                            }

                             
                          
                            if(this.top == 0){
                                this._initScroll();
                            }
                            this.on = true; 
                      }

                    for(var i = 0; i < listshopdata.length; i++) {
                        if(!listshopdata[i].price){
                            this.$set(listshopdata[i], 'className', 'item-noinv');
                        }//为什么家这句话，接口返回的数据不统一，编码的10个会返回8个编码数据，数据都乱了
                        this.listshopdata.push( listshopdata[i] )
                    }

                })
            },

            _initScroll(){
                var that = this;
                var totalPageCount1;
                var on = true;
                var num = 2;
                this.$refs.searchListWrap.onscroll = function(){
                    if(!totalPageCount1) {
                        totalPageCount1 = that.totalPageCount //滚动的总页数

                    }else if(totalPageCount1 > 0) {
                        that.top = this.scrollTop
                        if(num > totalPageCount1) return;
                        
                        if((this.children[0].offsetHeight - that.top <=  this.offsetHeight + 200) && that.on) {
                            that.on = false;
                            that.fetchDate(num)
                            num++;
                            
                        }

                    }
                }
            }
        },
 
        components:{
            list
        }
    }
</script>

<style lang="scss" scoped>
    .searchList-wrap a{
        color: #353d44;
     }
     .sn-tofixed {
        position: relative;
        width: 100%;
        z-index: 99;
        -webkit-transform: translate(0, 0);
        -webkit-transition: transform 0.5s;
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
    }
    .sn-pro-scroll {
        background-color: #fff;
        position: relative;
        z-index: 2;
        transition:height 0.2s;
    }
    .sn-tofixed .sn-nav {
        position: relative;
        width:13.4rem;
        overflow: hidden;
        height: 1.6rem;
        background-color: #fff;
        border-bottom: 1px solid #f0f0f0;
        z-index: 2;
        float: left;
    }
    .sn-tofixed .sn-nav.w100 {
        width: 100%;
    }
    .sn-tofixed .sn-nav li {
        display: inline-block;
        text-align: center;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 1.6rem;
        line-height: 1.6rem;
        min-width: 2.8rem;
    }
    .sn-tofixed .sn-nav li.curr a {
        padding: 0 0.2rem;
        color: #ff782d;
        border-bottom: 2px solid #ff782d;
        max-width: 4rem;
        overflow: hidden;
    }
    .sn-tofixed .sn-nav li a {
        display: inline-block;
        height: 1.6rem;
        line-height: 1.6rem;
        font-size: .52rem;
        color: #353d44;
    }
    .sn-tofixed .sn-ops {
        position: relative;
        height: 1.44rem;
        background-color: rgb(255,255,255);
        font-size: .56rem;
        color: #666;
        box-shadow: 0px 5px 20px #E8E7E7;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        z-index: 0;
    }
    .sn-tofixed .sn-ops .sn-sort {
        width: 15rem;
        height: 1.44rem;
        overflow: hidden;
        display: inline-block;
        float: left;
    }
    .sn-tofixed .sn-ops li {
        float: left;
        width: 33.3%;
        text-align: center;
        line-height: 1.44rem;
        margin: 0;
    }
    .sn-tofixed .sn-ops li.curr {
        color: #ff782d;
    }
    .sn-tofixed .sn-ops .price-sort .top {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: .18rem solid transparent;
        border-right: .18rem solid transparent;
        border-bottom: .18rem solid #666;
        left: 50%;
        margin-left: .7rem;
        top: .5rem;
    }
    .sn-tofixed .sn-ops .price-sort {
        position: relative;
    }
    .sn-tofixed .sn-ops .price-sort .bottom {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: .18rem solid transparent;
        border-right: .18rem solid transparent;
        border-top: .18rem solid #666;
        left: 50%;
        top: .8rem;
        margin-left: .7rem;
    }
    .searchList-wrap {
        width: 100%;
        height: 25.3rem;
        overflow-y: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        background-color: #fff;
    }
    .sn-tofixed .showout {
        height: 0;
        overflow: hidden;
    }
   
    .sn-tofixed .sn-ops .priceAsc .top {
        border-bottom: .18rem solid #fa0;
    }
    .sn-tofixed .sn-ops .priceDesc .bottom {
        border-top: .18rem solid #fa0;
    }

    .shoplist-nosale{
        position: fixed;
        left: 50%;
        top: 35%;
        margin-top: -3.5rem;
        margin-left: -3.5rem;
        width: 7rem;
        text-align: center;
    }
    .shoplist-nosale p {
        font-size: 13px;
        color: #666;
    }
    .noshop-button {
        display: inline-block;
        margin-top: 0.4rem;
        width: 90%;
        height: 1.5rem;
        line-height: 1.5rem;
        border: 1px solid #ff782d;
        border-radius: 2rem;
        color: #ff782d !important;
    }
    .sn-search {
      position: relative;
      height: 1.76rem;
      padding: .28rem .56rem;
      background-color: #fff;
      border-bottom: 1px solid #e7e7e7;
  }
  .sn-search .sn-se-inp {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 1.2rem;
    height: 1.2rem;
    padding: .2rem .2rem .2rem 1.12rem;
  }
  .sn-search .sn-se-inp .search-icon {
      display: inline-block;
      position: absolute;
      left: .4rem;
      top: 50%;
      -webkit-transform: translateY(-50%);
      width: .56rem;
      height: .56rem;
      background:url() 0 center no-repeat;
      background-size: contain;
  }
  .sn-search .sn-se-inp input {
    width: 100%;
    height: .8rem;
    border: none;
    background: none;
    color: #333;
  }
  .sn-search .search-btn {
      display: inline-block;
      position: absolute;
      top: .28rem;
      right: .56rem;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: .6rem;
      color: #ff782d;
  }
  .sn-tofixed .sn-nav .silder-li-1 {
    width: 50% !important;
 } 
 .sn-tofixed .sn-nav .silder-li-2 {
    width: 33.33% !important;
 } 
 .sn-tofixed .sn-nav .silder-li-3 {
    width: 25% !important;
 }  

 
</style>
